<template>
	<view class="container">
		<view class="talkBox" v-for="(item,index) in talkData" :key="item.tname">
			<view class="boxItem" @click="toTalkList(item.tname)">
				<view class="item_left">
					<view class="img">
						<image src="https://app.zbzedu.com/static/WaChat/icon/forum/hotType.png" mode="widthFix"
							style="width: 56rpx;"></image>
					</view>
					<view>
						<text>{{item.tname}}</text>
					</view>
				</view>
				<view class="item_right">
					<text>热度 {{item.tnum}}</text>
				</view>
			</view>
		</view>
		<loadMore :status="status"></loadMore>
	</view>
</template>

<script>
	import {
		request
	} from "../../util/api";
	import {
		CHECK_TOKEN
	} from '../../util/util.js';
	import loadMore from '../../components/loadMore'
	export default {
		components:{
			loadMore
		},
		data() {
			return {
				isLogin:CHECK_TOKEN(),
				talkData:[],
				pageNum: 1,
				status: 'loading'
			};
		},
		created() {
			this.pageNum=1,
			this.getData()
		},
		onPullDownRefresh() {
			this.getData()
			this.status = 'loading'
			this.pageNum = 1
			this.talkData = []
		},
		onReachBottom() {
			if (!this.status) {
				this.status = 'loading'
				this.getData()
			}
		},
		methods:{
			getData(){
				request({
					url:this.isLogin ? '/system/themeNoPageList' : '/system/wx/themeNoPageList',
					method:'get',
					not_loading: true,
					data: {
						pageNum: this.pageNum,
						pageSize: 10
					}
				}).then(res=>{
					this.talkData=this.talkData.concat(res.rows)
					this.pageNum++
					if (this.talkData.length >= res.total) {
						this.status = 'finished'
					} else {
						this.status = ''
					}
					uni.stopPullDownRefresh()
				})
			},
			// 跳转到话题页面
			toTalkList(item){
				uni.navigateTo({
					url:'/package/forum/diaryList?type=' + encodeURIComponent(item)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.container{
	.talkBox{
		border-bottom: 1rpx solid #f3f3f3;
		.boxItem{
			display: flex;
			margin:20rpx 30rpx;
			justify-content: space-between;
			align-items: center;
			.item_left{
				display: flex;
				width: 500rpx;
				overflow: hidden;    
				text-overflow:ellipsis;    
				whitewhite-space: nowrap;
				align-items: center;
				image{
					margin-right: 10rpx;
					margin-top: 8rpx;
				}
				text{
					font-size: 32rpx;
					color: #245484;
				}
			}
			.item_right{
				width: 100rpx;
				text{
					font-size: 28rpx;
				}
			}
		}
	}
}
</style>
